<template>
    <div class="box" id="box">
        <div class="box-header" id="box-header">
            <ul>
                <li v-for="(item,index) in  list"
                    :key="index"
                    @mouseover="getIndex(index)"
                    :class="index === current ? 'selected' : ''"
                >{{item}}
                </li>
            </ul>
        </div>
        <div class="box-content" id="box-content">
            <div class="box-content-item" v-for="(items,index) in detailsList" :key="index" v-show="current===index">
                <ul v-for="(item,index) in items" :key="index">
                    <li>{{item}}</li>
                </ul>
            </div>
            <!--            <div class="box-content-item">-->
            <!--                <ul>-->
            <!--                    <li>“全额返现”要管控啦</li>-->
            <!--                    <li>炒信规则调整意见反馈</li>-->
            <!--                    <li>淘宝新规发布汇总(7月)</li>-->
            <!--                    <li>质量相关规则近期变更</li>-->
            <!--                </ul>-->
            <!--            </div>-->
            <!--            <div class="box-content-item">-->
            <!--                <ul>-->
            <!--                    <li>阿里建商家全链路服务</li>-->
            <!--                    <li>个性化的消费时代来临</li>-->
            <!--                    <li>跨境贸易是中小企业机</li>-->
            <!--                    <li>美妆行业虚假信息管控</li>-->
            <!--                </ul>-->
            <!--            </div>-->
            <!--            <div class="box-content-item">-->
            <!--                <ul>-->
            <!--                    <li>接次文件，毁了一家店</li>-->
            <!--                    <li>账号安全神器阿里钱盾</li>-->
            <!--                    <li>新版阿里110上线了</li>-->
            <!--                    <li>卖家学违禁避免被处罚</li>-->
            <!--                </ul>-->
            <!--            </div>-->
            <!--            <div class="box-content-item">-->
            <!--                <ul>-->
            <!--                    <li>为了公益high起来</li>-->
            <!--                    <li>魔豆妈妈在线申请</li>-->
            <!--                </ul>-->
            <!--            </div>-->
        </div>
    </div>
</template>

<script>
	export default {
		name: "tab",
		data() {
			return {
				list: [
					"公告",
					"规则",
					"论坛",
					"安全",
					"公益"
				],
				current: 0,
				detailsList: [
					["数据七夕:金牛爱送玫瑰",
						"阿里打造互联网监管",
						"10万家店60万新品",
						"全球最大网上时装周"],
					[
						"接次文件，毁了一家店",
						"账号安全神器阿里钱盾"
					],
					[
						"接次文件，毁了一家店",
						"账号安全神器阿里钱盾"
					],
					[
						"接次文件，毁了一家店",
						"账号安全神器阿里钱盾"
					],
					[
						"接次文件，毁了一家店",
						"账号安全神器阿里钱盾"
					]
				]
			}
		},
		methods: {
			getIndex(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped>
    body, ul, p {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    .box {
        width: 498px;
        height: 130px;
        margin: 100px auto;
        border: 1px solid #ccc;
        overflow: hidden;
    }

    .box .box-header {
        height: 28px;
        line-height: 28px;
        background-color: #e8e8e8;
        text-align: center;
    }

    .box .box-header ul {
        width: 501px;
    }

    .box .box-header ul li {
        float: left;
        width: 98px;
        cursor: pointer;
        padding: 0 1px;
        border-bottom: 1px solid #ccc;
    }

    .box .box-header ul li.selected {
        background-color: #fff;
        border-bottom: none;
        border-right: 1px solid #ccc;
        padding: 0;
    }

    .box .box-header ul li:hover {
        font-weight: bolder;
        color: orangered;
    }

    .box .box-content {
        text-align: center;
    }

    .box .box-content .box-content-item ul li {
        float: left;
        width: 220px;
        margin: 5px;
        cursor: pointer;
    }

    .box .box-content .box-content-item {
        padding-top: 20px;
        /*display: none;*/
    }

    .box .box-content .box-content-item ul li:hover {
        color: orangered;
    }
</style>